<template>
    <view class="wallet-message-item">
        <view class="wallet-message-item-timer">{{ props.dataItem.time ? timerfn(new Date(props.dataItem.time)) : ""}}</view>
        <view class="wallet-message-main">
        <!-- <view class="wallet-message-item">
            <view class="wallet-message-main-title wallet-message-main-title-color">
                金币充值失败
            </view>
            <view class="wallet-message-main-text">
                浪漫七夕，相约颜值！
                现在参与“浪漫七夕”活动，即可领取七夕礼包颜值币奖励，活动时间2022.8.4-2022.8.7；活动规则：发布包含#相约七夕#、#浪漫七夕#、#七夕节#话题动态，即可获得100颜值币奖励，礼包每日可领取最高可获得400颜值币奖励，
                快来一起领取七夕礼包吧！
            </view>
            <view class="wallet-message-main-bottom">
                <text>立即参与</text>
            </view>
            </view>-->
            <view class="wallet-message-item-msg" v-if="props.dataItem.content.data.SourceType != 4">
                <view class="wallet-message-item-left">
                    <van-image round width="80rpx" height="80rpx" :src="q2" />
                </view>
                <view class="wallet-message-item-right">
                    <view class="wallet-message-item-right-title">{{ props.dataItem.content.data.Title }}</view>
                    <text>{{ props.dataItem.content.data.Content}}</text>
                </view>
            </view>
            <view class="wallet-message-item-msg" v-else>
                <view class="wallet-message-item-left">
                    <van-image round width="80rpx" height="80rpx" :src="q2" />
                </view>
                <view class="wallet-message-item-right">
                    <view class="wallet-message-item-right-title">{{ props.dataItem.fromNick }}</view>
                    <text>{{ props.dataItem.content.data.UserInfo.ShowName +  props.dataItem.content.data.ActionType + props.dataItem.content.data.Content}}</text>
                </view>
            </view>
        </view>
    </view>
</template>
    
<script setup>
import { reactive, getCurrentInstance, onMounted } from "vue"
import { getAuthorization, setAuthorization } from "@/utils/auth.js"
import {timer} from "@/utils/tool.js"
import q2 from "@/assets/image/icon20.png"
const props = defineProps(['dataItem'])

import { onLoad } from '@dcloudio/uni-app'
const state = reactive({
    msgList: {
        0: {
            text: '会员开通成功',
            url: '/pages/home/person/openMemberPage/index'
        }
    }
})

const onClickLeft = () => history.back();

const timerfn = (date) => {
    return timer(date,'m-d h:m')
}

onLoad((options) => {
    
})



</script>
    
<style lang="scss" scoped>
.wallet-message-item {
    margin-bottom: 30rpx;
}

.wallet-message-item-timer {
    font-size: 20rpx;
    font-weight: 500;
    color: #999999;
    text-align: center;
}

.wallet-message-main {
    // padding: 36rpx;
    // background: #fff;
    // margin: 20rpx 30rpx 0 30rpx;
    // border-radius: 12rpx;

    .wallet-message-main-title {
        font-weight: bold;
        color: #333333;
        font-size: 30rpx;
        margin-bottom: 40rpx;
    }

    // .wallet-message-main-title-color {
    //     color: #f00;
    // }

    .wallet-message-main-text {
        font-weight: 500;
        color: #262626;
        line-height: 48rpx;
        text-align: justify;
    }

    .wallet-message-main-bottom {
        display: flex;
        justify-content: center;
        align-items: center;
        padding-top: 30rpx;
        margin-top: 30rpx;
        border-top: 1px solid #E7E8E9;
        color: #999;
        font-weight: bold;
        color: #262626;
        font-size: 32rpx;

        img {
            width: 16rpx;
            height: 30rpx;
        }
    }
}

.wallet-message-item-msg{
    display: flex;
    padding:20rpx;
    .wallet-message-item-left{
        width:80rpx;
        height:80rpx;
        margin-right: 20rpx;
        flex:none;
    }
    .wallet-message-item-right{
        background: #fff;
        border-radius: 8rpx;
        padding:30rpx;
        width:100%;
        color:#666;
        .wallet-message-item-right-title{
            font-size: 36rpx;
            margin-bottom: 20rpx;
            color:#333;
        }
    }
}
</style>
    